<template>
  <div class="post-detail-view">
    <div class="detail-header"></div>
    <el-card class="detail-card">
      <!-- 帖子头部 -->
      <div class="post-header">
        <el-avatar :src="selectedPost.author_avatar" :size="48" />
        <div class="post-meta">
          <div class="author-info">
            <span class="author-name">{{ selectedPost.author_name }}</span>
            <el-tag type="success" size="small" effect="light">
              {{ selectedPost.tags }}
            </el-tag>
            <span class="post-time">{{ $formatDateTime(selectedPost.created_at, {
              relative: true,
              format: 'yyyy年MM月dd日 HH时mm分'
            }) }}</span>
          </div>
          <h2 class="post-title">{{ selectedPost.title }}</h2>
        </div>
        <el-button type="primary" link @click="backToList" class="back-btn">
          <component :is="ArrowLeft" class="icon" />
          返回社区
        </el-button>
      </div>

      <!-- 帖子内容 -->
      <div class="post-content">
        <div class="content-text" v-html="renderMarkdownWithImageSize(`${selectedPost.content}`)"></div>
      </div>

      <!-- 互动数据 -->
      <div class="post-stats">
        <div class="stat-item">
          <component :is="ThumbsUp" class="stat-icon" />
          <span>{{ selectedPost.likes_count }} 点赞</span>
        </div>
        <div class="stat-item">
          <component :is="MessageCircle" class="stat-icon" />
          <span>{{ comments.length }} 评论</span>
        </div>
        <div class="stat-item">
          <component :is="Share2" class="stat-icon" />
          <span>{{ selectedPost.shares_count }} 分享</span>
        </div>
      </div>

      <!-- 评论区域 -->
      <div class="comment-section">
        <h3>评论（{{ comments.length }}）</h3>
        <div class="comment-list">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <el-avatar :src="comment.author.avatar" :size="40" />
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">{{ comment.author.username }}</span>
                <span class="comment-time">{{ $formatDateTime(comment.createdAt) }}</span>
              </div>
              <p class="comment-text">{{ comment.content }}</p>
            </div>
          </div>
        </div>
        <!-- 发表评论 -->
        <div class="comment-editor">
          <el-input v-model="newComment" placeholder="写下你的评论..." :rows="2" type="textarea" resize="none" />
          <el-button type="primary" class="submit-btn" @click="submitComment" :disabled="!newComment.trim()">
            发表评论
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { defineProps, defineEmits } from 'vue'
import MarkdownIt from 'markdown-it';

import {
  ThumbsUp,
  MessageCircle,
  Share2,
  ArrowLeft
} from 'lucide-vue-next'

const props = defineProps({
  selectedPost: {
    type: Object,
    required: true,
  },
  comments: {
    type: Array,
    required: true,
  }
});


const markdown = new MarkdownIt()
const renderMarkdownWithImageSize = (content) => {
  const html = markdown.render(content);
  return html.replace(/<img/g, '<img style="flex-shrink: 0; width: 260px; height: 200px; border-radius: 8px; background-size: cover;"');
};
const emit = defineEmits(['backToList', 'submit-comment'])
const newComment = ref('')

const backToList = () => {
  emit('backToList', false)
}

const submitComment = async () => {
  if (newComment.value.trim()) {
    emit('submit-comment', newComment.value.trim())
    newComment.value = ''
  }
}
</script>

<style scoped lang="scss">
$primary-color: #10b981;
$secondary-color: #34d399;
$text-color: #1f2937;
$border-color: #e5e7eb;
$background-color: #f8fafc;

.post-detail-view {
  max-width: 100%;
  margin: 0 auto;
  height: 95%;
  overflow-y: auto;
  padding: 12px;
  
  .back-btn {
    margin-bottom: 16px;
    padding-left: 0;
    color: $primary-color;
    transition: color 0.3s ease;

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      transition: transform 0.3s ease;
    }

    &:hover {
      color: darken($primary-color, 10%);

      .icon {
        transform: translateX(-3px);
      }
    }
  }

  .detail-card {
    border-radius: 12px;
    border: 1px solid rgba($primary-color, 0.1);
    overflow: hidden;
  }

  .post-header {
    display: flex;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid $border-color;

    .post-meta {
      flex: 1;

      .author-info {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin-bottom: 30px;

        .author-name {
          font-size: 16px;
          font-weight: 600;
          color: $text-color;
        }

        .el-tag {
          background: rgba($primary-color, 0.1);
          border-color: rgba($primary-color, 0.2);
          color: $primary-color;
          height: 24px;
          padding: 0 8px;
        }

        .post-time {
          color: #64748b;
          font-size: 13px;
        }
      }

      .post-title {
        text-align: center;
        margin: 0;
        font-size: 20px;
        line-height: 1.4;
        color: $text-color;
      }
    }
  }

  .post-content {
    padding: 16px;

    .content-text {
      font-size: 14px;
      line-height: 1.6;
      color: $text-color;
      white-space: pre-wrap;
      margin-bottom: 16px;
    }
  }

  .post-stats {
    display: flex;
    gap: 20px;
    padding: 16px;
    .stat-item {
      display: flex;
      align-items: center;
      color: $text-color;
      cursor: pointer;
      transition: color 0.3s ease;

      .stat-icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
    }
  }

  .comment-section {
    padding: 16px;
    border-top: 1px solid $border-color;

    h3 {
      margin: 0 0 16px 0;
      font-size: 16px;
      color: $text-color;
      font-weight: 600;
    }

    .comment-list {
      margin-bottom: 20px;

      .comment-item {
        display: flex;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .comment-content {
          flex: 1;

          .comment-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;

            .comment-author {
              font-weight: 500;
              color: $text-color;
              font-size: 13px;
            }

            .comment-time {
              color: #94a3b8;
              font-size: 11px;
            }
          }

          .comment-text {
            margin: 0;
            color: #475569;
            line-height: 1.5;
            font-size: 13px;
          }
        }
      }
    }

    .comment-editor {
      margin-top: 16px;

      .el-textarea {
        :deep(.el-textarea__inner) {
          border-radius: 8px;
          border-color: $border-color;
          transition: all 0.3s ease;

          &:focus {
            border-color: $primary-color;
            box-shadow: 0 0 0 1px $primary-color;
          }
        }
      }

      .submit-btn {
        margin-top: 12px;
        width: 100%;
        padding: 12px;
        font-size: 14px;
        background: linear-gradient(135deg, $primary-color, $secondary-color);
        border: none;
        color: white;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        &:active {
          transform: translateY(0);
        }        }
      }
    }
  }
@media (max-width: 768px) {
  .post-detail-view {
    padding: 0 8px 25px 8px;
    
    .back-btn {
      margin-bottom: 12px;

      .icon {
        width: 14px;
        height: 14px;
      }
    }

    .post-header {
      padding: 12px;
      gap: 8px;

      .post-meta {
        .author-info {
          gap: 6px;

          .author-name {
            font-size: 13px;
          }

          .el-tag {
            height: 18px;
            padding: 0 4px;
          }

          .post-time {
            font-size: 11px;
          }
        }

        .post-title {
          font-size: 16px;
        }
      }
    }

    .post-content {
      padding: 12px;

      .content-text {
        font-size: 13px;
        line-height: 1.5;
      }
    }

    .post-stats {
      gap: 16px;
      padding: 12px;

      .stat-item {
        font-size: 12px;

        .stat-icon {
          width: 14px;
          height: 14px;
        }
      }
    }

    .comment-section {
      padding: 12px;

      h3 {
        font-size: 15px;
        margin-bottom: 12px;
      }

      .comment-list {
        margin-bottom: 16px;

        .comment-item {
          gap: 8px;
          padding: 8px 0;

          .comment-content {
            .comment-header {
              gap: 6px;

              .comment-author {
                font-size: 12px;
              }

              .comment-time {
                font-size: 10px;
              }
            }

            .comment-text {
              font-size: 12px;
            }
          }
        }
      }

      .comment-editor {
        margin-top: 12px;

        .submit-btn {
          padding: 10px;
          font-size: 13px;
        }
      }
    }
  }
}
</style>